:root {
  --bg: #0b1020;
  --card: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #60a5fa;
  --row: #111827;
  --border: #1f2937;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
  background: radial-gradient(1200px 800px at 20% -10%, #1d283a 0%, var(--bg) 60%);
  color: var(--text);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

header h1 { margin: 6px 0 12px; letter-spacing: .5px; }
.controls {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.controls input, .controls select, .controls button {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}
.controls input { min-width: 220px; }
.controls button { cursor: pointer; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0 8px;
}
.stats > div {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.stats span {
  display: block; font-size: 28px; font-weight: 700;
}
.stats small { color: var(--muted); }

.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}
thead th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  background: #0c1426;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
tbody tr:nth-child(odd) { background: #0c1220; }
tbody tr:nth-child(even) { background: #0c1323; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

.empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
}

.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid #00000040;
}
.dot-green { background: #10b981; }
.dot-yellow { background: #f59e0b; }
.dot-gray { background: #6b7280; }

button.link {
  background: transparent;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
button.link:hover { opacity: .9; }

footer details {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
footer summary { cursor: pointer; color: var(--muted); }
pre {
  background: #0b1221;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
}

/* 主题变量：默认明亮；显式暗黑用 [data-theme="dark"]；
   若选择“跟随系统”，则不设置 data-theme，交由 media query 覆盖。 */

/* 明亮主题（默认） */
:root {
  --bg: #f5f7fb;
  --bg-accent: #dbeafe;

  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #2563eb;

  --row1: #ffffff;
  --row2: #f8fafc;
  --thead: #f1f5f9;
  --border: #e5e7eb;

  --pre: #f8fafc;
}

/* 系统偏好为暗黑时（仅当未显式选择主题时生效） */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1020;
    --bg-accent: #1d283a;

    --card: #0f172a;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --accent: #60a5fa;

    --row1: #0c1220;
    --row2: #0c1323;
    --thead: #0c1426;
    --border: #1f2937;

    --pre: #0b1221;
  }
}

/* 显式暗黑（优先级最高） */
:root[data-theme="dark"] {
  --bg: #0b1020;
  --bg-accent: #1d283a;

  --card: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #60a5fa;

  --row1: #0c1220;
  --row2: #0c1323;
  --thead: #0c1426;
  --border: #1f2937;

  --pre: #0b1221;
}

/* 显式明亮（可不写，放着更清晰） */
:root[data-theme="light"] {
  --bg: #f5f7fb;
  --bg-accent: #dbeafe;

  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #2563eb;

  --row1: #ffffff;
  --row2: #f8fafc;
  --thead: #f1f5f9;
  --border: #e5e7eb;

  --pre: #f8fafc;
}

/* —— 以下使用变量，不再写死颜色 —— */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
  background: radial-gradient(1200px 800px at 20% -10%, var(--bg-accent) 0%, var(--bg) 60%);
  color: var(--text);
}

.container { max-width: 1100px; margin: 0 auto; padding: 16px; }

header h1 { margin: 6px 0 12px; letter-spacing: .5px; }
.controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.controls input, .controls select, .controls button {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}
.controls input { min-width: 220px; }
.controls button { cursor: pointer; }

.controls .danger {
  border-color: #ef4444;
  color: #ef4444;
}
.controls .danger:hover {
  opacity: .9;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0 8px;
}
.stats > div {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.stats span { display: block; font-size: 28px; font-weight: 700; }
.stats small { color: var(--muted); }

.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  background: var(--thead);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
tbody tr:nth-child(odd) { background: var(--row1); }
tbody tr:nth-child(even) { background: var(--row2); }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

.empty { padding: 18px; text-align: center; color: var(--muted); }

.dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 999px; border: 1px solid #00000040;
}
.dot-green { background: #10b981; }
.dot-yellow { background: #f59e0b; }
.dot-gray { background: #6b7280; }

button.link {
  background: transparent; border: none; color: var(--accent);
  text-decoration: underline; cursor: pointer; padding: 0;
}
button.link:hover { opacity: .9; }

footer details {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
footer summary { cursor: pointer; color: var(--muted); }
pre {
  background: var(--pre);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
}

/* —— 强调按钮：更高对比、清晰的悬停/按下/禁用态 —— */
:root {
  --btn-primary-bg: #2563eb;      /* 明亮主题的主色（蓝） */
  --btn-primary-text: #ffffff;
  --btn-primary-border: #1e40af;
  --btn-primary-hover: #1d4ed8;
  --btn-primary-active: #1e40af;
}

[data-theme="dark"] {
  --btn-primary-bg: #3b82f6;      /* 暗黑主题下略亮一点 */
  --btn-primary-text: #0b1220;    /* 深色背景下也能看清的文字色 */
  --btn-primary-border: #60a5fa;
  --btn-primary-hover: #60a5fa;
  --btn-primary-active: #93c5fd;
}

/* 基础按钮 */
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border, #ccc);
  background: var(--card, #fff);
  color: var(--text, #111);
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  transition: transform .02s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* 主要按钮（用于登录） */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 3px color-mix(in srgb, var(--btn-primary-bg) 20%, transparent);
}
.btn-primary:hover {
  background: var(--btn-primary-hover);
}
.btn-primary:active {
  background: var(--btn-primary-active);
  transform: translateY(1px);
}

/* 焦点可见：键盘导航更清晰 */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-primary-bg) 40%, transparent);
}

/* 禁用态 */
.btn[disabled],
.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}


/* 登录链接在明亮/暗黑下的可读色 */
.link-login {
  color: #2563eb;                 /* light: 蓝 */
  font-weight: 600;
  text-decoration: none;
}
.link-login:hover { text-decoration: underline; }
.link-login:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.35);
  border-radius: 6px;
}

/* 暗黑主题下更亮一点 */
[data-theme="dark"] .link-login {
  color: #93c5fd;                 /* light-blue-300 */
}